<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../static/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" type="text/css" href="../static/plugin/layer/skin/layer.css">
    <link rel="stylesheet" type="text/css" href="../static/css/dj-css.css">

    <style type="text/css">
        body{padding-top:10px;}
        .fl{float:left;}
        .fr{float:right;}
        .por{position: relative;}
        #pagination{margin:0 20px;}
        .layui-form{margin:0 20px;}
        .update input{position: absolute;height:36px;width:100px;z-index:3;opacity: .01;cursor: pointer;}
        .update span{color:#5FB878;position: absolute;left:0;top:0;width: 110px;height:36px;text-align:center;line-height:36px;border:1px solid #ddd;border-bottom-right-radius: 2px;border-top-right-radius:2px;font-size:20px;}
        .update i{color:#000;font-style: normal;font-size:16px;}
        /*复选框样式*/
        ul{border:1px solid #ddd;}
        ul li{height:32px;line-height:32px;}
        .checkbox{position: relative;width:100px;height:32px;padding-left:32px;}
        .checkbox input{position: absolute;left:0;top:0;width:100px;height:32px;opacity:.01;z-index:2;cursor:pointer;}
        .checkbox input:hover+i.checkboxIcon{border:1px solid #5FB878;}
        .checkbox i.checkedColor{color:#fff;border:1px solid #5FB878;background: #5FB878;}
        /*table td ,table th{border:1px solid #bbb;padding:0 5px;font-size:14px;}*/
        .checkbox i.checkboxIcon{position: absolute;width:22px;height:22px;line-height:22px;text-align:center; text-indent: -8px;border:1px solid #ddd;top:0;bottom:0;left:0;margin:auto;z-index:1;font-size:16px;color:#ddd;}
        /*三角旋转*/
        .downTriangle{transition:all 0.5s;}
        .downTriangle.downRotate{transform: rotate(90deg);}
        .x-red{color:red;}
        .layui-form-item{line-height: 38px;}
    </style>
</head>
<body>
<div id="createApp">
    <fieldset class="layui-elem-field layui-field-title" >
        <legend>用户</legend>
    </fieldset>
    <form action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline" >
                <input type="text" name="userName" v-model="parameter.userName" autocomplete="off" class="layui-input" placeholder="请输入用户名" @blur="verify(parameter.userName)">
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">工号</label>
            <div class="layui-input-inline">
                <input type="text" name="userCode" v-model="parameter.userCode" lay-verify="required" placeholder="请输入工号" autocomplete="off" class="layui-input" @blur="verify(parameter.userCode)">
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-inline">
                <input type="text" name="email" v-model="parameter.email" lay-verify="required" placeholder="请输入邮箱" autocomplete="off" class="layui-input" @blur="verify(parameter.email)">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-inline">
                <input type="text" name="phoneNum" v-model="parameter.phoneNum" lay-verify="required" placeholder="请输入电话" autocomplete="off" class="layui-input" @blur="verify(parameter.phoneNum)">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-inline">
                <input type="text" name="userPassword" v-model="parameter.userPassword" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" @blur="verify(parameter.userPassword)">
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item">

            <div class="dj-select dj-select-inline">
                <label>所属部门</label>
                <div class="dj-select-content">
                    <div class="dj-select-input" flag = 'true'>
                        <span class="dj-selected" id="parentDeptId" type="text" name=""  selectedCode='' >请选择所属部门</span>
                        <i></i>
                    </div>
                    <ul class="dj-select-list" dj-this=''>
                        <li v-for="item in deptList" :code="item.id"  :class="{'selected':item.deptName == defaultDept.deptName}" @click="selectSubDept(item.id)">{{item.deptName}}</li>
                    </ul>
                </div>
            </div>

            <div class="dj-select dj-select-inline" style="margin-left:32px;">
                <div class="dj-select-content">
                    <div class="dj-select-input" flag = 'true'>
                        <span class="dj-selected" id="deptId" type="text" name=""  selectedCode='' >请选择所属部门</span>
                        <i></i>
                    </div>
                    <ul class="dj-select-list" dj-this=''>
                        <li code=''>请选择所属部门</li>
                        <li v-for="subItem in subDeptList" :code="subItem.id" v-if="subItem.parentDeptId == parentDeptIdFlag  " :class="{'selected':subItem.deptName == defaultSubDept.deptName}">{{subItem.deptName}}</li>
                    </ul>
                </div>
            </div>
            <span class="x-red">*必填</span>
        </div>
        <div class="layui-form-item clearfix" >
            <label class="layui-form-label">角色分配</label>
            <ul class="receive" style="width: 190px;float:left;" >
                <li  class="checkbox por" style="width: 190px;">
                    <span @click="downShow()" style="cursor: pointer;display: inline-block;width:154px;">请选择角色<i class="layui-icon downTriangle" style="float:right;font-size:20px;cursor:pointer;" :class="{'downRotate':downShowFlag}">&#xe623;</i>
                    </span>
                </li>
                <li v-for="item in roleList" v-if="downShowFlag">
                    <label class="checkbox por" >
                    <input type="checkbox" name="myRoleList" :value="item.pkRoleId" v-model="myRoleList" :checked="item.checked" @click="selectRole(item)" >
                    <i class="layui-icon checkboxIcon"  :class="{'checkedColor':item.checked}">&#xe618;</i>
                    {{item.roleName}}
                    </label>
                </li>
            </ul>
            <span class="x-red">*必填</span>
        </div>
    </form>
    <div class="layui-form-item">
        <label class="layui-form-label"></label><button class="layui-btn" lay-submit="" lay-filter="demo2" @click="sub">提交</button>
    </div>
</div>
<script src="../static/lib/jquery.min.js"></script>
<script src="../static/lib/layui/layui.js" charset="utf-8"></script>
<script src="../static/lib/vue.min.js"></script>
<script src="../static/lib/x-layui.js"></script>
<script src="../static/lib/dj-js.js"></script>
<script type="text/javascript">
    var userId='$!{map.user.pkUserId}';
    var VM = new Vue({
        el:"#createApp",
        data:{
            deptList:[],
            subDeptList:[],
            myRoleIdList:[],
            roleList:[],
            myRoleList:[],
            parameter:{
                userName:'$!{map.user.userName}',
                userCode:'$!{map.user.userCode}',
                email:'$!{map.user.email}',
                phoneNum:'$!{map.user.phoneNum}',
                pkUserId:'$!{map.user.pkUserId}',
                userPassword:'$!{map.user.userPassword}',
                createTime:"$!{map.user.createTime}",
                updateTime:"$!{map.user.updateTime}",
                updateUser:'$!{map.user.updateUser}',
                createUser:'$!{map.user.createUser}',
                roles:'',
                deptId:''/*$!{map.user.deptId}*/
            },
            downShowFlag:false,
            parentDeptIdFlag:'',
            pid:'',
            defaultSubDept:'',
            defaultDept:''
        },
        created:function(){
            this.getMyRoleList();
            this.getDeptList();

        },
        methods:{
            verify:function (item) {
                if(item == ""){
                    layer.msg("必填项不能为空！", {icon: 5});
                    return false;
                }
            },
            sub:function () {
                var _this = this;
                _this.parameter.roles = "";
                console.log(_this.parameter.roles);
                _this.myRoleIdList = [];
                this.roleList.forEach(function(item,index){
                    if(item.checked){
                        console.log(22);
                        _this.myRoleIdList.push(item.pkRoleId)
                    }
                });
                _this.parameter.roles = _this.myRoleIdList.join(",");

                console.log(_this.parameter.roles);
                _this.parameter.deptId=$("#deptId").attr("selectedCode");

                if(this.parameter.userName == "" ){
                    layer.msg("请输入用户名！", {icon: 5});
                    return false;
                }else if(this.parameter.userCode == ""){
                    layer.msg("请输入工号！", {icon: 5});
                    return false;
                }
                else if(this.parameter.email == ""){
                    layer.msg("请输入邮箱！", {icon: 5});
                    return false;
                }
                else if(this.parameter.phoneNum == ""){
                    layer.msg("请输入电话！", {icon: 5});
                    return false;
                }
                else if(this.parameter.userPassword == ""){
                    layer.msg("请输入密码！", {icon: 5});
                    return false;
                }else if(_this.parameter.deptId == "" || _this.parameter.deptId == null || _this.parameter.deptId == " "){
                    layer.msg("请选择部门！", {icon: 5});
                    return false;
                }
                else if(_this.parameter.roles == ""){
                    layer.msg("请选择角色！", {icon: 5});
                    return false;
                }
                if(this.parameter.phoneNum != ""){
                    if(!regPhone.test(this.parameter.phoneNum)){
                        layer.msg("输入的电话号码格式不正确", {icon: 5});
                        return false;
                    }

                }
                if(this.parameter.email != ""){
                    if(!regEmail.test(this.parameter.email)){
                        layer.msg("输入的邮箱格式不正确", {icon: 5});
                        return false;
                    }

                }

//                console.log(_this.parameter.roles);
                $.ajax({
                    type: "post",
                    url: "../user/saveOrUpdate.do",
                    data: _this.parameter,
                    dataType: "json",
                    success: function(data){
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        parent.window.location.reload();
                        window.location.href = "javascript:location.replace(location.href)";
                    }
                });
            },
            getMyRoleList:function () {
                var _this = this;
                $.ajax({
                    type: "post",
                    url: "../user/getOneUserRoles.do?uid="+userId,
                    dataType: "json",
                    success: function(data){
                        _this.myRoleList=data.result.roleUserList;
                        _this.getRoleList();
                        console.log(_this.myRoleList)
                    }
                });
            },
            getRoleList:function(){
                var _this = this;
                $.ajax({
                    type:"post",
                    url:'../role/allList.do',
                    dataType:"json",
                    success:function(res){
                        _this.roleList = res.result.roles;
                        console.log(_this.roleList);
                        if(_this.myRoleList){
                            _this.roleList.forEach(function(item,index){
                                _this.myRoleList.forEach(function(item1,index1){
                                    if(item.pkRoleId == item1.pkRoleId){
//                                        console.log(item.pkRoleId);
                                        if(typeof item.checked == "undefined"){
                                            Vue.set(item,"checked",true);
                                        }else{
                                            item.checked = !item.checked;
                                        }
                                    }
                                });
                            });
                        }
                    }
                })
            },
            selectRole:function (item) {
                if(typeof item.checked == "undefined"){
                    Vue.set(item,"checked",true);
                }else{
                    item.checked = !item.checked;
                }
            },
            downShow:function(){
                this.downShowFlag = !this.downShowFlag;
            },
            getDeptList:function(){
                var _this=this;

                $.ajax({
                    type: "post",
                    url: "../department/list2.do?uid="+userId,
                    dataType: "json",
                    success: function(data){
                        console.log(data);
                        _this.deptList=data.result.level1List;
                        _this.subDeptList=data.result.level2List;
                        _this.defaultDept = data.result.level1;
                        _this.defaultSubDept = data.result.level2;
                        //默认一级选中
                        if(_this.defaultDept){
                            _this.pid = _this.defaultDept.id;
                            if(_this.defaultDept.deptName){
                                $('#parentDeptId').html(_this.defaultDept.deptName);
                                $('#parentDeptId').attr("selectedCode",_this.defaultDept.id);
                            }


                            _this.parentDeptIdFlag = _this.defaultDept.id;
                        }
                        console.log(_this.pid);
                        //默认二级选中
                        if(_this.defaultSubDept){
//                            _this.deptId = _this.defaultSubDept.id;
                            if(_this.defaultSubDept.deptName){
                                $('#deptId').html(_this.defaultSubDept.deptName);
                                $('#deptId').attr("selectedCode",_this.defaultSubDept.id);
                            }
                        }
                        console.log(_this.deptId);
                    }
                });

            },
            selectSubDept:function(pid){
//                console.log(121221);
                this.parentDeptIdFlag = pid;
                $("#deptId").html("").attr("selectedCode",'');
            }
        }
    });//vue 实例结束
    layui.use(['layer',"form",'laydate'], function(){
        var form = layui.form(),
                layer = layui.layer,
                laydate = layui.laydate;
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input.checkbox');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });

    });
    var regPhone=/^1\d{10}$/;
    var regEmail=/^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
</script>
</body>
</html>